跳到主要内容

过渡

过渡定义了状态机如何以及何时从一个状态移动到另一个状态。一个过渡由四个部分组成:

路径

过渡移动的方向。

示例:角色可能有一条从 IdleWalk 的路径,也有另一条从 Walk 返回 Idle 的路径。

条件

过渡发生的时机。

示例:角色可能在按下按钮时过渡到 Walk,然后在松开按钮时返回 Idle

属性

过渡的行为方式。

示例:你可以将过渡持续时间设置为 0.2 秒,让状态之间的变化更平滑。

操作

过渡发生时要执行的额外行为。

示例:一个过渡可以触发事件、设置属性值,或对齐目标。

过渡路径

过渡路径决定状态机如何从一个状态移动到另一个状态。

要创建过渡路径,请将光标移动到你想离开的状态附近,直到圆点出现。点击圆点并拖拽到你想过渡到的状态。

创建过渡

连接两个状态后,过渡路径会显示一个带箭头图标的圆圈,用于指示过渡方向。在这个示例中,状态机可以从 Timeline 1 移动到 Timeline 2,但不能从 Timeline 2 返回 Timeline 1。

要允许状态机返回 Timeline 1,请从 Timeline 2 开始创建另一条过渡路径。

创建反向过渡

你可以在相同的两个状态之间创建多个过渡。每个过渡都可以有不同的条件,从而创建“或”逻辑。

创建“或”过渡

过渡条件

条件决定过渡何时可以发生。

如果没有条件,过渡会在被到达时立即触发。这可能导致状态机在状态之间快速移动,或直接跳到某个单一动画。

添加条件

要为过渡添加条件,请选择该过渡,然后点击 Conditions 旁边的加号按钮。

一个条件由三部分组成:

  • Source value - 条件监听的值或事件
  • Operator - Source value 的比较方式
  • Comparison value - Source value 要与之比较的值

例如,角色可能在 isWalkingtrue 时从 Idle 过渡到 Walk

在这个条件中,isWalkingSource valueequalsOperatortrueComparison value

添加过渡条件

Source Value

条件可以由许多不同的来源驱动,包括:

  • View Model 属性
  • 事件
  • 内置属性,例如画板宽度、高度和比例

Source value

Operator

条件可以使用 equals、does not equal、greater than、greater than or equal to、less than 和 less than or equal to 等比较方式。可用的比较方式取决于正在比较的值类型。

Operator

Comparison Value

Comparison value 是 Source value 要与之比较的值。

Comparison value

你可以输入固定的 comparison value,例如 true100"mobile"。你也可以将 comparison value 数据绑定到另一个属性,让过渡与动态数据进行比较。

例如,当 speed 大于数据绑定的 walkThreshold 值时,可以发生过渡。

添加多个条件

你可以向单个过渡添加多个条件。所有条件都必须满足后,过渡才会发生。

添加多个条件

过渡属性

添加过渡后,选择方向指示器即可配置该过渡。过渡面板包含三个不同的部分:过渡属性、条件和插值。

选择多个过渡可以一次更新多个属性。

过渡属性

Duration

Duration 属性描述过渡发生所需的时间。

Duration 默认设置为零,表示过渡会立即发生。因此,当我们在这两个动画之间过渡时,看起来就像对象从画板的一侧瞬间跳到了另一侧。

示例文件可在 Rive Marketplace 中查看:Transitions Demos

Exit Time

Exit Time 告诉状态机,在过渡之前当前状态必须播放多少。

默认情况下,Exit Time 未勾选。要启用 Exit Time,请使用复选框。启用后,你可以使用时间值或百分比。

例如,如果你希望状态机在过渡前播放完整动画,可以输入该动画的持续时间,或使用 100%。

Exit time 100%

Pause Source When Exiting

Pause Source When Exiting 会在过渡播放期间暂停你正在离开的状态中的动画。

在这个示例中,上下运动会在过渡开始后立即暂停。

退出时暂停

Allow Exit During Transition

Allow exit during transition 控制状态机是否可以在某个过渡完成之前离开该过渡。

例如,如果按钮正在从 Idle 过渡到 Hover,而用户将光标移开,Allow exit during transition 会允许它立即过渡回 Idle。

过渡期间允许退出

Interpolation

你可以在 Transitions Panel 底部为过渡添加插值。默认情况下,插值设置为 linear,但你也可以使用 cubic 和其他插值。

如果你不熟悉插值的基础知识,请参阅插值(缓动)

操作

过渡也可以在发生时执行操作。

与用于决定过渡是否可以发生的条件不同,操作会在过渡被触发时执行某项操作。

操作可用于:

  • 设置属性值
  • 报告事件
  • 对齐目标
  • 控制焦点
  • 触发脚本操作

操作也可以在状态开始或结束时触发。

请参阅状态操作

创建操作

创建过渡操作

  1. 添加操作

    选中过渡后,前往 Actions 标签页,点击 + 按钮,然后选择一种操作类型。

  2. 配置操作

    根据操作类型配置该操作。

Action Timing

每个操作都可以在以下时机运行:

  • Start — 在过渡开始时运行
  • End — 在过渡完成后运行

Randomize Exit

Randomize Exit 让一个状态从它的出站过渡路径中随机选择一条。

你可以通过“随机退出”示例了解如何使用 Randomize Exit:为一个状态配置多条离开路径,并为每条路径分配不同权重,状态机会根据权重随机选择要走的路径。

要使用它,请选择起始状态并启用 Randomize Exit。该状态会列出每条离开它的路径,并允许你为每条路径分配权重。

权重越高,该路径被选中的可能性就越大。例如,如果 Timeline 1 的权重为 3Timeline 2 的权重为 1,则状态机有 75% 的概率过渡到 Timeline 1,有 25% 的概率过渡到 Timeline 2

禁用过渡

你可以在不删除过渡的情况下暂时禁用它。当你想隔离状态机的一部分进行测试,或暂时移除某条路径但不丢失其配置时,禁用会很有用。

有两种方式可以切换过渡的启用状态:

  • 从过渡面板: 选择过渡,然后点击面板中的启用/禁用图标。
  • 从画布: 右键点击过渡,然后选择 Disable transition(如果已禁用,则选择 Enable transition)。

从右键菜单禁用过渡